<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../locale/easyui-lang-zh_CN.js"></script>
</head>
<body>

<div style="margin:10px 0;">
    <a href="javascript:void(0)" class="easyui-linkbutton">收缩所有</a>
    <a href="javascript:void(0)" class="easyui-linkbutton">展开所有</a>
    <a href="javascript:append()" class="easyui-linkbutton">新增</a>
    <a href="javascript:void(0)" class="easyui-linkbutton">修改</a>
    <a href="javascript:confirm('是否确认删除?一旦删除将无法恢复');" class="easyui-linkbutton">删除</a>
    <a href="javascript:void(0)" class="easyui-linkbutton">展开</a>
    <a href="javascript:void(0)" class="easyui-linkbutton">收缩</a>
</div>
<table id="tg" class="easyui-treegrid" title="菜单管理" style="width:700px;height:350px">
    <thead>
    <tr>
        <th data-options="field:'name',width:180,editor:'text'">菜单名称</th>
        <th data-options="field:'persons',width:60,align:'right',editor:'text'">URL</th>
        <th data-options="field:'index',width:80,editor:'text'">INDEX</th>
        <th data-options="field:'end',width:80,editor:'text'">是否启用</th>
        <th data-options="field:'progress',width:80,align:'right',editor:'text'">描述</th>
    </tr>
    </thead>
</table>

<div id="edit" style="border: 1px solid #ccc; width: 300px; display: none;">
    <form id="editForm">
        菜单名称：<input type="text" data-key="name" name="menu.name"/><br/>
        菜单链接地址：<input type="text" data-key="url" name="menu.url"/><br/>
        <input type="hidden" name="menu.id" data-key="id"/>
        <input type="hidden" name="menu.pid" data-key="pid"/>
        父节点：
        <select id="combotree" class="easyui-combotree" style="width:200px;"></select> <br/>
        菜单描述：<input type="text" data-key="description" name="menu.description"/><br/>
        是否启用：<input type="checkbox" checked/><br/>
        INDEX：<input type="text"/><br/>
        <a id="btn-save" href="javascript:config.events.save()" class="easyui-linkbutton"
           data-options="iconCls:'icon-ok'">修改</a>
        <a id="btn" href="javascript:config.events.hideForm();" class="easyui-linkbutton"
           data-options="iconCls:'icon-cancel'">取消</a>
    </form>
</div>
      <script>
            $("#tg").treegrid({
                rownumbers: true,
                animate: true,
                collapsible: true,
                fitColumns: true,
                singleSelect: true,
                url: 'mytreegrid_data2.json',
                method: 'get',
                idField: 'id',
                pagination: true,
                treeField: 'name',
                onClickRow: function(a,b){
                },
                onDblClickRow: function(row){
                    alert('弹出修改');
                }
            });
      </script>
</body>
</html>